<!--
 * @页面名称: 模式1
 * @描述: 有案卷,卷内,附件,全文,案卷下有卷内和附件
 * @作者: 辛慰
 * @Date: 2020-07-31 12:00:08
-->
<template>
  <div class="mode-one">
    <!-- 左侧树 -->
    <left-tree
      :tabList="tabList"
      :isShowLeftTree.sync="isShowLeftTree"
      :treeData="treeData"
      @tabClick="tabClick">
    </left-tree>
    <div class="right-table" :style="{width: (isShowLeftTree ? 'calc(100% - 2px)': '82%')}">
      <!-- 案卷模块 -->
      <div v-if="tabItemType==='tab_leftTab1'" style="height: 100%;">
        <splitpanes horizontal style="height: 200%;">
          <pane>
            <floder-card
              :tableData="floderTableData"
              :tableColumns="floderColumns"
              :floderLinkData="floderLinkData"
              @floderClick="floderButtonClick"
              @floderToLink="floderToLink"
              @textTable="textTable"></floder-card>
          </pane>
          <pane>
            <el-tabs v-model="activeName" type="border-card" id="file-appendix">
              <el-tab-pane label="文件" name="first">
                <file-card @textTable="textTable"></file-card>
              </el-tab-pane>
              <el-tab-pane label="附件" name="second">
                <appendix-card @textTable="textTable"></appendix-card>
              </el-tab-pane>
            </el-tabs>
          </pane>
        </splitpanes>
      </div>
      <!-- 卷内模块 -->
      <div v-if="tabItemType==='tab_leftTab2'" style="height: 100%;">
        <file-card @textTable="textTable"></file-card>
      </div>
      <!-- 附件模块 -->
      <div v-if="tabItemType==='tab_leftTab3'" style="height: 100%;">
        <appendix-card @textTable="textTable"></appendix-card>
      </div>
      <!-- 未归档模块 -->
      <div v-if="tabItemType==='tab_leftTab4'" style="height: 100%;">
        <file-card @textTable="textTable"></file-card>
      </div>
    </div>
  </div>
</template>

<script>
import { LeftTree, FloderCard, FileCard, AppendixCard } from '@/views/dynamic/components'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
  name: '',
  components: {
    LeftTree,
    FloderCard,
    FileCard,
    AppendixCard,
    Splitpanes,
    Pane
  },
  data () {
    return {
      tabList: [
        { name: '案卷', mode: '1' },
        { name: '卷内', mode: '2' },
        { name: '附件', mode: '3' },
        { name: '未归档', mode: '4' }
      ],
      isShowLeftTree: false, // 是否显示左侧数据
      tabItemType: 'tab_leftTab1',
      treeData: [ // 左侧树
        {
          title: '1990-1999 1990年-1999年',
          key: '1',
          children: [
            { title: '1990 1990年', key: '1-0' },
            { title: '1991 1991年', key: '1-1' },
            { title: '1992 1992年', key: '1-2' },
            { title: '1993 1993年', key: '1-3' },
            { title: '1994 1994年', key: '1-4' },
            { title: '1995 1995年', key: '1-5' },
            { title: '1996 1996年', key: '1-6' },
            { title: '1997 1997年', key: '1-7' },
            { title: '1998 1998年', key: '1-8' },
            { title: '1999 1999年', key: '1-9' }
          ]
        }
      ],
      floderTableData: [{ // 案卷表格数据
        IsLock: true,
        OrderNum: '1',
        Year: '2020',
        Code: '1990-1-001',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '永久',
        Security: '机密',
        Op_ID: 'admin',
        Remark: '测试数据1'
      }, {
        IsLock: false,
        OrderNum: '2',
        Year: '2020',
        Code: '1990-1-002',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '30年',
        Security: '机密',
        Op_ID: 'admin',
        Remark: '测试数据2'
      }, {
        IsLock: false,
        OrderNum: '3',
        Year: '2020',
        Code: '1990-1-003',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '永久',
        Security: '机密',
        Op_ID: 'admin',
        Remark: '测试数据3'
      }, {
        IsLock: false,
        OrderNum: '4',
        Year: '2020',
        Code: '1990-1-004',
        topic: '河南新安虎马沟村系列杀人抢劫案',
        BGQXData: '永久',
        Security: '机密',
        Op_ID: 'admin',
        Remark: '测试数据4'
      }],
      floderColumns: [{ // 案卷表头数据
        title: '锁标志',
        field: 'IsLock'
      }, {
        title: '顺序号',
        field: 'OrderNum'
      }, {
        title: '年代号',
        field: 'Year'
      }, {
        title: '档号',
        field: 'Code'
      }, {
        title: '题名',
        field: 'topic'
      }, {
        title: '保管期限',
        field: 'BGQXData'
      }, {
        title: '密级',
        field: 'Security'
      }, {
        title: '操作员',
        field: 'Op_ID'
      }, {
        title: '备注',
        field: 'Remark'
      }],
      floderLinkData: [ // 案卷下有的数据
        {
          title: '文件数据',
          isdivided: false
        },
        {
          title: '附件数据',
          isdivided: true
        }
      ],
      activeName: 'first'
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    tabClick (val) {
      switch (val) {
        case '1':
          this.tabItemType = 'tab_leftTab1'
          break
        case '2':
          this.tabItemType = 'tab_leftTab2'
          break
        case '3':
          this.tabItemType = 'tab_leftTab3'
          break
        case '4':
          this.tabItemType = 'tab_leftTab4'
          break
      }
    },
    // 案卷表格事件
    floderButtonClick (val) {
      console.log(val)
      switch (val) {
        case '添加案卷':
          this.$parent.dynamicModal.title = '添加案卷'
          this.$parent.dynamicModal.visible = true
          break
        case '修改案卷':
          this.$parent.dynamicModal.title = '修改案卷'
          this.$parent.dynamicModal.visible = true
          break
        case '删除案卷':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        case '克隆新增':
          this.$parent.dynamicModal.title = '克隆新增'
          this.$parent.dynamicModal.visible = true
          break
        case '执行触发器':
          console.log('执行触发器')
          break
        case '标记备注':
          this.$parent.markModal.title = '案卷标记'
          this.$parent.markModal.visible = true
          break
        case '查询归卷':
          this.$parent.rollbackModal.visible = true
          break
        case '修改分类':
          this.$parent.classModal.visible = true
          break
        case '修改轨迹':
          this.$parent.logModal.visible = true
          break
        case '简易搜索':
          this.$parent.simpleModal.visible = true
          break
      }
    },
    // 跳转到案卷表格下对应的数据
    floderToLink (name) {
      if (name === '文件数据') {
        this.activeName = 'first'
        document.getElementById('file-appendix').scrollIntoView({ block: 'end', behavior: 'smooth' })
      } else if (name === '附件数据') {
        this.activeName = 'second'
        document.getElementById('file-appendix').scrollIntoView({ block: 'end', behavior: 'smooth' })
      }
    },
    textTable () {
      this.$parent.textTable.visible = true
    }
  }
}
</script>
<style lang="less" scoped>
.mode-one {
  height: 100%;
  display: flex;
  .right-table {
    transition: all 0.2s;
    .el-tabs {
      height: 100%;
      /deep/ .el-tabs__content {
        padding: 10px;
        height: calc(100% - 40px);
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
}
</style>
